<template>
  <view class="userSettings">
    <view class="first-box">
      <view class="item">
        <view class="text">用户名</view>
        <view>{{ userInfo.username }}</view>
      </view>
      <view class="item" @tap="getUploadImg()">
        <view class="text">头像</view>
        <view class="img">
          <image v-if="userInfo.avatar" :src="userInfo.avatar" />
          <image v-else src="https://mm.wentsoft.com/images/head-sculpture.png" />
        </view>
        <view class="text-arrow" />
      </view>
      <view class="item" @tap="toAddressList">
        <view class="text">地址管理</view>
        <view class="text-arrow" />
      </view>
    </view>
    <view class="other-entrance">
      <view class="item" @tap="toEditPage('nickname')">
        <view class="text">昵称</view>
        <view class="text-arrow">{{ userInfo.nickname }}</view>
      </view>
      <view class="item" @tap="toEditPage('password')">
        <view class="text">修改密码</view>
        <view class="text-arrow" />
      </view>
    </view>
    <view class="login-out" @click="loginOut">退出登录</view>
  </view>
</template>

<script>
import { updateProfile } from '@/api/api1.js'
import website from '@/const/website'
export default {
  components: {},

  data() {
    return {
      showImgBoxPopup: false,
      userPic: '',
      userPicUrl: ''
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLogin() {
      return this.$store.getters.hasLogin
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },

  onLoad() { },

  methods: {
    // 去修改信息（性别生日用插件在本页选就好）
    toEditPage(type) {
      if (type === 'nickname') {
        uni.$u.route('/pages/users/editPage/editPage', {
          type: type,
          nickname: this.userInfo.nickname
        })
      } else {
        uni.$u.route('/pages/users/editPage/editPage', {
          type: type
        })
      }
    },
    loginOut() {
      this.$store.dispatch('Logout').then(res => {
        uni.$u.toast('退出成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 300)
      })
    },
    getUploadImg() {
      const that = this
      uni.chooseImage({
        count: 1,
        success: (res) => {
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: (image) => {
              console.log('选择本地图片路径：', res.tempFilePaths[0])
              that.uploadAvatar(res.tempFilePaths[0])
            },
            fail: () => uni.$u.toast('只能上传图片!')
          })
        }
      })
    },
    // 上传头像
    uploadAvatar(tempFilePath) {
      const that = this
      uni.uploadFile({
        url: website.baseUrl + '/sys-file/upload',
        filePath: tempFilePath,
        name: 'file',
        header: { Authorization: 'Bearer ' + that.$store.getters.accessToken },
        success: (res) => {
          console.log('图片上传：', res)
          const result = JSON.parse(res.data)
          const avatarUrl = website.baseUrl + result.data.url
          that.updateUserAvatar(avatarUrl)
        }
      })
    },
    // 修改头像信息
    updateUserAvatar(avatar) {
      const that = this
      console.log('修改头像信息：', avatar)
      updateProfile(
        { username: that.userInfo.username, avatar: avatar }
      ).then(() => {
        that.userInfo.avatar = avatar
      })
    },
    // 去管理地址
    toAddressList() {
      uni.$u.route('/pages/users/address/addressList')
    }

  }
}
</script>

<style>
@import './userSettings.css';
</style>
